<template>
  <div class="money">
    <div class="header-warpper">
      <span style="padding-left:0" @click="$router.back(-1)">
        <img src="../../assets/l_jt.png" alt />
        <span>提币地址</span>
      </span>
      <router-link to="addsite">添加地址</router-link>
    </div>
    <ul>
      <li v-for="(item,id) in array" :key="id">
        <p class="li-name">{{item.type}}</p>
        <p class="moneysit">钱包地址: {{item.moneysite}}</p>
        <p class="remark">备注: {{item.remark}}</p>
      </li>
    </ul>
    <p class="pull" ref="yins">{{newxin}}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      page: 1,
      array: [],
      txtarray: [],
      newxin: "下拉更新"
    };
  },
  beforeCreate() {
    sessionStorage.removeItem("currency");
    this.$axios.post("/index/Mentionaddress/getftype").then(res => {
      this.txtarray = res.data.info;

      this.$axios
        .post("/index/mentionaddress/getlist", {
          page: this.page,
          limit: 10
        })
        .then(res => {
          if (res.data.code == 0) {
            var arr = res.data.info;

            for (var i = 0; i < arr.length; i++) {
              var typetxt = "";
              for (var j = 0; j < this.txtarray.length; j++) {
                if (this.txtarray[j].values == arr[i].type) {
                  typetxt = this.txtarray[j].name;
                }
              }
              this.array.push({
                type: typetxt,
                moneysite: arr[i].address,
                remark: arr[i].remark
              });
            }
            arr.length < 10 ? (this.newxin = "已加载所有数据") : "";
          } else {
            this.newxin = "";
            this.$createToast({ txt: res.data.msg, type: "txt" }).show();
          }
        });
    });
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll, true);
  },
  methods: {
    //下拉更新  vue下拉更新 下拉加载
    handleScroll() {
      var scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop; //变量windowHeight是可视区的高度
      var windowHeight =
        document.documentElement.clientHeight || document.body.clientHeight; //变量scrollHeight是滚动条的总高度
      var scrollHeight =
        document.documentElement.scrollHeight || document.body.scrollHeight;
      if (scrollTop + windowHeight == scrollHeight) {
        //请求数据接口
        this.array.length > 0 ? (this.page++,this.getDate()) : "";
        return false;
      }
    },
    getDate() {
      this.$axios
        .post("/index/mentionaddress/getlist", {
          page: this.page,
          limit: 10
        })
        .then(res => {
          if (res.data.code == 0) {
            var arr = res.data.info;
            for (var i = 0; i < arr.length; i++) {
              var typetxt = "";
              for (var j = 0; j < this.txtarray.length; j++) {
                if (this.txtarray[j].values == arr[i].type) {
                  typetxt = this.txtarray[j].name;
                }
              }
              this.array.push({
                type: typetxt,
                moneysite: arr[i].address,
                remark: arr[i].remark
              });
            }
          } else {
            this.page--;
            this.newxin = "已加载所有数据";
          }
        });
    }
  }
};
</script>
<style lang="less" scoped>
.pull {
  font-size: 0.4rem;
  padding: 0.4rem 0;
  text-align: center;
}
li {
  padding-bottom: 0.2rem;
  padding-top: 0.4rem;
  margin-bottom: 0.4rem;
  border-bottom: 1px solid #c3c6cf;
  text-align: left;
  p {
    color: #aab2ca;
    font-size: 0.36rem;
    margin-bottom: 0.46rem;
  }
  .li-name {
    color: black;
    font-size: 0.5rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
  }
}
.money {
  padding: 0 0.4rem;
}
.f-flex {
  display: flex;
  display: -webkit-flex;
  align-items: center;
}
.header-warpper {
  padding-left: 0;
  .f-flex();
  height: 1.333333rem;
  position: relative;
  color: #000;
  img {
    width: 0.213333rem;
    height: 0.373333rem;
  }
  span {
    font-size: 0.48rem;
    padding-left: 0.2rem;
  }
  a {
    color: #aab2ca;
    position: absolute;
    right: 0;
    line-height: 1.333333rem;
    font-size: 0.4rem;
  }
}
</style>

